<template>
  <div class="home">
    <Header />
    <div class="container">
      <div class="border-box-content container_border">
        <div class="home_left">
          <div class="left_top home_item">
            <ItemTitle txt="业务数据总览"></ItemTitle>
            <LeftTop />
          </div>
          <div class="left_bottom home_item">
            <ItemTitle txt="管理费缴纳情况" :more="true"></ItemTitle>
            <LeftBottom />
          </div>
        </div>
        <div class="home_center">
          <div class="center_top home_item">
            <ItemTitle txt="墓区总览"></ItemTitle>
            <CenterTop />
          </div>
          <div class="center_bottom home_item">
            <ItemTitle txt="每年海葬业务办理统计"></ItemTitle>
            <CenterBottom />
          </div>
        </div>
        <div class="home_right">
          <div class="right_top home_item">
            <ItemTitle txt="骨灰格位总览"></ItemTitle>
            <RightTop />
          </div>
          <div class="right_bottom home_item">
            <ItemTitle txt="壁葬情况总览"></ItemTitle>
            <RightBottom />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
import ItemTitle from '@/components/ItemTitle'
import LeftTop from '@/components/home/LeftTop'
import LeftBottom from '@/components/home/LeftBottom'
import CenterTop from '@/components/home/CenterTop'
import CenterBottom from '@/components/home/CenterBottom'
import RightTop from '@/components/home/RightTop'
import RightBottom from '@/components/home/RightBottom'
export default {
  name: 'Home',
  components: {
    Header,
    Footer,
    ItemTitle,
    LeftTop,
    LeftBottom,
    CenterTop,
    CenterBottom,
    RightTop,
    RightBottom
  },
  data() {
    return {
      timer: null
    }
  },
  mounted() {
    this.timer= setInterval(()=>{
      this.$router.go(0)
    },60000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .container {
    flex: 1;
    width: 100%;
    padding: 0 .375rem;


    /deep/ .border-box-content {
      display: flex;
      justify-content: space-between;
      padding: 0 .1rem;

      .home_item {
        display: flex;
        flex-direction: column;
      }

      .home_left {
        width: 7.5rem;
        height: 100%;
        padding-top: .25rem;

        .left_top {
          margin-bottom: .25rem;
        }
      }

      .home_center {
        width: 7.5rem;
        height: 100%;
        padding-top: .25rem;

        .center_title {
          text-align: center;
          font-size: .225rem;
          line-height: .45rem;
        }

        .center_bottom {
          margin-top: .25rem;
        }
      }

      .home_right {
        width: 7.5rem;
        height: 100%;
        padding-top: .25rem;

        .right_bottom {
          margin-top: .25rem;
        }
      }
    }

  }
}
</style>
